<template>
	<u-popup :show="showPay" :round="10" @close="showPay=false" @open="showPay=true" :closeOnClickOverlay="onOverlay" :zIndex="10070">
		<view class="p15 c0 f16">
			<view class="dfbc pb10 br-b">
				<text class="wei f12">支付金额</text>
				<text class="f14 cf5f">￥{{params.money}}</text>
			</view>
			<view class="dfbc bb1 p-10-0">
				<u-radio-group v-model="params.payType" placement='column' iconColor="#000" iconPlacement='right'
					@change="changePay">
					<u-radio :activeColor="subColor" name="authCode" :labelSize="18" :iconSize="14":customStyle="{marginBottom: '50rpx'}">
						<view class="flex f-y-c">
							<text class="iconfont icon-saoma1 mr5" :style="{color:'#57C248',fontSize:'22px'}"></text>
							<view>扫码支付</view>
						</view>
					</u-radio>
					<u-radio :activeColor="subColor" name="balance" :labelSize="18" :iconSize="14"
						:customStyle="{marginBottom: '50rpx'}">
						<view v-if="payVip && payVip.id" class="flex">
							<text class="iconfont icon-yuetixian mr5" :style="{color:'#F46B6B',fontSize:'22px'}"></text>
							<view class="f-bt f-y-c">
								<view>余额支付</view>
								<view class="f12 c9 ml10" :style="{color: 'subColor'}">{{(`余额:${payVip.account.balance}`)}}</view>
							</view>
						</view>
						<view v-else class="flex f-y-c">
							<text class="iconfont icon-yuetixian mr5" :style="{color:'#F46B6B',fontSize:'22px'}"></text>
							<view>余额支付</view>
						</view>
					</u-radio>
					<u-radio :activeColor="subColor" name="cash" :labelSize="18" :iconSize="14" :customStyle="{marginBottom: '50rpx'}">
						<view class="flex f-y-c">
							<text class="iconfont icon-xianjin mr5" :style="{color:'#FFB420',fontSize:'22px'}"></text>
							<view>现金支付</view>
						</view>
					</u-radio>
					<block v-if='ways && ways.length'>
						<u-radio :activeColor="subColor" :name="v.costomPayId" :labelSize="18" :iconSize="14" :customStyle="{marginBottom: '50rpx'}" v-for="(v,i) in ways" :key="i">
							<view class="flex f-y-c">
								<image :src="v.img" mode="aspectFit" class="waywh mr5"></image>
								<view>{{v.title}}</view>
							</view>
						</u-radio>
					</block>
				</u-radio-group>
			</view>
			<!-- <view class="mt10 mb20" v-if="v.diningType==4 && v.payType==2">
				<u-checkbox-group v-model="params.printSwitch" placement="row" icon-color="#000" @change="checkboxChange">
					<u-checkbox :activeColor="subColor" label="打印结账单" :name="1"></u-checkbox>
				</u-checkbox-group>
			</view> -->
			<view class="ljzf">
				<u-button text="立即支付" :color="subColor" @click="goPay"
					:customStyle="{borderRadius: '60rpx',height:'100rpx',color:'#000',fontWeight:'bold',fontSize:'17px'}"
					:disabled="!params.payType || (params.payType == 'authCode' && !params.authCode || params.payType == 'balance' && !payVip.id)">
				</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		components: {
		},
		props: {
			ps: {
				type: Object, 
				default: {}
			},
			payVip: {
				type: Object, 
				default: {}
			},
			v: {
				type: Object, 
				default: {}
			},
			onOverlay:{
				type: Boolean,
				default: true
			},
		},
		watch: {
			ps(newval) {
				this.params = newval
				if(newval.costomPayId){
					this.params.payType = newval.costomPayId
				}
			},
		},
		data() {
			return {
				params:{},
				showPay: false,
				subColor: uni.getStorageSync('subject_color'),
				ways:[],
			}
		},

		methods: {
			open(ps){
				this.params = ps
				this.showPay = true
				this.getWays()
			},
			close() {
				this.showPay = false
			},
			changePay(e) {
				this.$emit('changePay', e)
			},
			goPay(){
				this.$emit('goPay')
			},
			checkboxChange(n) {
				this.$emit('print',n)
				// this.params.printSwitch = n
			},
			async getWays(){
				let {
					data
				} = await this.beg.request({
					url: this.api.costomPay
				})
				this.ways = data.map(v => ({
					img: v.logo,
					title: v.name,
					value: 'costomPay',
					costomPayId: v.id,
				}))
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-button__text {
		font-size: 17px !important;
		font-weight: 700 !important;
	}
	.waywh{
		width: 22px;
		height: 22px;
		border-radius: 50%;
	}
</style>